<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
.mask{
	background-color: #000;
	opacity: 0.3;/*透明度0-1*/
	width: 100%;/*根据父元素的宽高调节元素宽度*/
	height: 100%;
	position:fixed;/*固定定位*/
	top: 0;
	left: 0;
	z-index: 100;/*层级数*/
	display: none;
}
.pop{
	width: 356px;
	height: 429px;
	background-color: #fff;
	position: absolute;
	z-index: 101;
	/*top:50%;
	left:50%;
	margin-left:-178px;
	margin-top:-215px;*/
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: none;
}
.pop-content{margin: 20px;}
.close-btn{float: right;}
</style>
</head>




<body>
<!--登录-->
	<div>
    <button id="login">登录</button>
</div>
<!--遮罩-->
<div class="mask" id="mask"></div>
 <!--弹窗-->
 <div class="pop" id="pop">
   <div class="pop-content">
    <p>
    <button class="close-btn" id="closeBtn">关闭</button>
    </p>
    <p>
    登录弹窗
    </p>
    </div>
</div>
<script>
  //获取并记录登录按钮HTML元素
  //记录/存放元素：用    var 变量名=***
  //获取元素： 用doncument.getElementById()
  var oLogin=document.getElementById("login");
  //测试语句，测试是否抓到登录节点
  console.log(oLogin);
  //获取并记录遮罩HTML元素
  var oMask=document.getElementById("mask");
  console.log(oMask);
  //获取并记录弹窗HTML元素
  var oPop=document.getElementById("pop");
  //console.log(oPop);
  var oCloseBtn=document.getElementById("closeBtn");
console.log(oCloseBtn);
  function displayPop(){
  	oPop.style.display="block";
  	oMask.style.display="block";
  }
 
//displayPop 函数负责显示弹窗和遮罩
 //oPop.style.display="block";
 //displayPop();
  oLogin.onclick=displayPop;
//登录按钮负责隐藏弹窗和遮罩
function hiddenPop(){
      //显示弹窗
      oPop.style.display="none";
      //显示遮罩
      oMask.style.display="none";
}
//关闭按钮绑定单击事件调用函数显示弹窗
oCloseBtn.onclick=hiddenPop;
</script>
</body>
</html>